<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>大同煤炭职业技术学院培训证书查询系统</title>
    <link href=static/favicon.ico rel="shortcut icon" type=image/x-icon>
    <link href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" rel="stylesheet">
    <style>
        table {
            border-collapse: collapse;
        }

        table tr td {
            border-top: 2px solid #f8f8f8;
        }

    </style>
</head>
<body style='background-color:#f8f8f8;'>
<div align='center' id="app" style='background-color:#f8f8f8;'>
    <div style=" background-image: none; margin-top: 12px; ">
        <div>
            <img lazy="loaded"
                 src="https://tj.xindcloud.com/images/1.jpg"
                 style="border-color: rgb(228, 228, 228); min-height: auto; width: 100%;" title="大同煤炭职业技术学院培训中心证书查询系统">
        </div>

        <div id="content" v-if="showResult">
            <div style='color: #969799;margin-bottom:20px;margin-top:20px;'>
                证书查询结果
            </div>
            <div id='img1' style="background-color: rgba(255, 255, 255, 0); min-height: auto; width: 100%;">
                <img :src="frontImage" alt="证书正面"
                     style="border-color: rgb(228, 228, 228); min-height: auto; width: 100%;">
            </div>
            <div id='img2'
                 style="background-color: rgba(255, 255, 255, 0); min-height: auto; width: 100%;margin-top:40px;">
                <img :src="backImage" alt="证书背面"
                     style="border-color: rgb(228, 228, 228); min-height: auto; width: 100%;">
            </div>
            <div style='color: #969799;margin-bottom:20px;margin-top:20px;'>
                证书查询详情
            </div>
            <div style="background-color: #fff; min-height: auto; width: 100%;">
                <table style='color: #323233; background-color:#fff' width='100%;'>
                    <tr height='56px;'>
                        <td width='30%'>&nbsp;&nbsp;姓名</td>
                        <td>{{certInfo.userName}}</td>
                    </tr>

                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;性别</td>
                        <!-- <td>${data.certInfo.sex}</td> -->
                        <td>{{certInfo.sex}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;身份证号</td>
                        <!-- <td>${data.certInfo.idCard}</td> -->
                        <td>{{certInfo.idCard}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;人员类别</td>
                        <!-- <td>${data.certInfo.personalType}</td> -->
                        <td>{{certInfo.personalType}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;行业类型</td>
                        <!-- <td>${data.certInfo.industry}</td> -->
                        <td>{{certInfo.industry}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;工作单位</td>
                        <!-- <td>${data.certInfo.belongCompany}</td> -->
                        <td>{{certInfo.belongCompany}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;初领日期</td>
                        <!-- <td>${data.certInfo.firstDate}</td> -->
                        <td>{{certInfo.firstDate}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;有效期从</td>
                        <!-- <td>${data.certInfo.validityDateStart}</td> -->
                        <td>{{certInfo.validityDateStart}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;有效期至</td>
                        <!-- <td>${data.certInfo.validityDateEnd}</td> -->
                        <td>{{certInfo.validityDateEnd}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;培训日期从</td>
                        <!-- <td>${data.certInfo.trainDateStart || '-'}</td> -->
                        <td> {{certInfo.trainDateStart || '-'}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;培训日期至</td>
                        <!-- <td>${data.certInfo.trainDateEnd}</td> -->
                        <td>{{certInfo.trainDateEnd}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;学时</td>
                        <!-- <td>${data.certInfo.studyHour}</td> -->
                        <td>{{certInfo.studyHour}}</td>
                    </tr>

                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;发证单位</td>
                        <!-- <td>${data.certInfo.issuingUnit}</td> -->
                        <td>{{certInfo.issuingUnit}}</td>
                    </tr>
                    <tr height='56px;'>
                        <td>&nbsp;&nbsp;培训内容</td>
                        <td>
                            <div v-for="(item, index) in certInfo.trainContent">
                                {{ index + 1 }}.{{ item }}
                            </div>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </div>
            <div style='color: #969799;margin-top:60px;margin-bottom:60px;height:120px;'>
                大同煤炭职业技术学院
            </div>
        </div>

        <div id="noData" v-else>
            <div style="color: #969799;margin-bottom:60px;margin-top:60px;">
                {{ loadingTitle }}
            </div>
        </div>
    </div>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                showResult: false,
                frontImage: '',
                backImage: '',
                certInfo: {},
                loadingTitle: '查询中...'
            }
        },
        mounted() {
            this.fetchCertificateInfo()
        },
        methods: {
            fetchCertificateInfo() {
                const id = this.getQueryString('id')
                const https = this.getQueryString('https')

                axios.get(`${https}/api/coalMineTraining/web/getCertificateInfo?id=${id}`, {
                    // 超时时间
                    timeout: 5000
                })
                    .then(response => {
                        console.log(response.data);

                        const data = response.data.data
                        if (data) {
                            this.showResult = true
                            this.frontImage = data.frontImage
                            this.backImage = data.backImage
                            this.certInfo = data.certInfo
                            this.certInfo.trainContent = data.certInfo.trainContent.split('，')
                        } else {
                            this.showResult = false
                            this.loadingTitle = response.data.message
                        }
                    })
                    .catch(error => {
                        console.error('Error fetching certificate info:', error)
                        this.showResult = false
                        this.loadingTitle = '查询失败'
                    })
            },
            getQueryString(name) {
                const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`)
                const r = window.location.search.substr(1).match(reg)
                if (r != null) return decodeURIComponent(r[2])
                return null
            }
        }
    })
</script>
</body>
</html>